<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="字典类型">
        <el-select v-model="bindForm.dictType" clearable placeholder="请选择字典类型">
          <el-option
            v-for="item in bizTypeOptions"
            :key="item.key"
            :value="item._id"
            :label="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="字典状态">
        <el-select v-model="bindForm.value" placeholder="字典状态" clearable>
          <el-option label="开启" :value="1" />
          <el-option label="关闭" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button @click="openDialog">新建</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="tableData"
      style="width: 100%"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        prop="label"
        label="字典项标签"
      />
      <!-- 用插槽方式把分类状态翻译成中文 -->
      <el-table-column
        prop="value"
        label="字典项值"
      >
        <!-- <template slot-scope="{row}">
          <span v-if="row.value===1">开启</span>
          <span v-if="row.value===0">关闭</span>
        </template> -->
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
      />
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createdAt|parseTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="findDictItemFun(scope)"
          >修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页数 -->
    <!-- 页数 -->
    <template>
      <div class="block">
        <el-pagination
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </template>
    <!-- 弹窗 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="字典标签" prop="label">
          <el-input v-model="form.label" />
        </el-form-item>
        <el-form-item label="数据项值" prop="value">
          <el-input v-model="form.value" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sumibt('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getItemList, dictItemCreate, dictItemDelete, findDictItem, updateDictItem } from '@/api/dictionaries/dictItem'
import { getList } from '@/api/dictionaries/dictType'
import { parseTime } from '@/utils/index/'
export default {
  // 过滤
  filters: {
    parseTime(date) {
      return parseTime(date, '{y}/{m}/{d} {h}-{i}-{s}')
    }
  },
  data() {
    return {
      tableData: [],
      listLoading: true,
      dialogFormVisible: false,
      title: '新建字典项',
      IdCode: '', // 获取链接上的id
      dictItemId: '', // 根据是否有dictItemId判断是弹窗新建还是修改
      pageNo: 1,
      pageSize: 5,
      total: 0,
      radio: '1',
      bindForm: {
        dictType: null,
        label: null,
        value: null
      },
      form: {
        dictType: null,
        label: null,
        value: null,
        remark: null
      },
      searchForm: {
        dictType: null,
        label: null,
        value: null,
        remark: null
      },
      rules: {
        dictType: [
          { required: true, message: '请输入字典名称', trigger: 'blur' }
        ],
        label: [
          { required: true, message: '请输入字典名称', trigger: 'blur' }
        ],
        value: [
          { required: true, message: '请输入字典名称', trigger: 'blur' }
        ]
      },

      dictList: null,
      bizTypeOptions: []
    }
  },
  created() {
    console.log('route', this.$route.query.id)
    this.IdCode = this.$route.query.id
    this.searchForm.dictType = this.IdCode
    this.getListItemFun()
    this.getListFun()
  },
  methods: {
    onSearch() {
      this.searchForm.dictType = this.bindForm.dictType
      console.log(this.searchForm.dictType)
      this.getListItemFun()
    },
    // 获取列表
    getListItemFun() {
      getItemList({
        dictType: this.searchForm.dictType,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }).then(res => {
        // console.log(res.data.list)
        this.listLoading = false
        const { code, data } = res
        if (code === 200) {
          this.total = data.pagination.count
          this.tableData = data.list
        }
      })
    },
    getListFun() {
      getList().then(res => {
        console.log(res)
        const { code, data } = res
        if (code === 200) {
          // for (var i = 0; i < data.list.length; i++) {
          //   this.bizTypeOptions.push({
          //     _id: data.list[i]._id,
          //     code: data.list[i].code
          //   })
          // }
          this.bizTypeOptions = data.list
          console.log(this.bizTypeOptions)
        }
      })
      this.listLoading = false
    },

    // 弹窗
    openDialog() {
      this.title = '新建字典项'
      this.dialogFormVisible = true
      this.form = {
        // dictType: this.IdCode,
        dictType: null,
        label: null,
        value: null,
        remark: null
      }
    },
    //   新建字典项
    dictItemCreateFun() {
      this.form.dictType = this.IdCode
      dictItemCreate(this.form).then(res => {
        const { code } = res
        if (code === 200) {
          this.dialogFormVisible = false
          this.getListItemFun()
        }
      })
    },
    //  查找要修改的字典项
    findDictItemFun({ row }) {
      this.openDialog()
      console.log(row._id)
      this.title = '修改字典项'
      findDictItem(row._id).then(res => {
        console.log(res)
        const { code, data } = res
        if (code === 200) {
          const { dictType, label, value, remark, _id } = data
          this.dictItemId = _id
          this.form = {
            dictType,
            label,
            value,
            remark

          }
        }
      })
    },
    // 修改字典项
    updateDictItemFun() {
      updateDictItem(this.dictItemId, this.form).then(res => {
        const { code } = res
        if (code === 200) {
          this.dialogFormVisible = false
          this.getListItemFun()
        }
      })
    },
    handleDelete({ row }) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row._id)
        dictItemDelete(row._id).then(res => {
          const { code } = res
          if (code === 200) {
            this.getListItemFun()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    sumibt(formName) {
      if (this.dictItemId) {
        this.updateDictItemFun()
      } else {
        this.dictItemCreateFun()
      }
      this.$refs[formName].validate((valid) => {
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getListItemFun()
      console.log(`每页${val}条`)
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.getListItemFun()
      console.log(`当前页：${val}`)
    }

  }
}
</script>

<style lang="scss" scoped>

</style>
